<template>
  <div>
    <div class="top">
      <HomeTop :flag="flag"></HomeTop>
    </div>
    <Swipe></Swipe>
    <div class="grid">
      <Grid></Grid>
    </div>
    <JDSeckill></JDSeckill>
    <van-tabbar v-model="active" active-color="#ee0a24" >
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="logistics" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" v-model="flag" :to="flag==0?'/login':'/user'">
        <span v-if="flag==0">登录</span>
        <span v-else>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import HomeTop from "./home/HomeTop.vue";
import Grid from "./home/Grid.vue";
import Swipe from "./home/Swipe.vue";
import JDSeckill from "./home/JDSeckill.vue";

export default {
  components: {
    HomeTop,
    Grid,
    Swipe,
    JDSeckill,
  },
  data(){
    return{
      active: 0,
      flag:0,  // 0 登录  1 我的
    }
  },
  created(){
    this.flag = Number(this.$route.query.flag);
    // console.log(this.flag);
  }
};
</script>
<style lang="scss">
$color: red;
@mixin yj($radius) {
  border-radius: $radius;
}
body {
  font-size: 12px;
}
.box {
  width: 100px;
  background-color: #ccc;
  @include yj(20px);
  a {
    color: $color;
    text-align: center;
    text-decoration: none;
    &:hover {
      color: yellow;
    }
  }
}
.van-tabbar{
  display: flex;
  height: 50px;
}
#app{
  background: #f6f6f6;
}
</style>
